<template>
    <div id="secondHandsellConfim">
        <!--后退-->
      <img style="position:fixed;height:0.8rem;width:0.5rem;top:1.25rem;left:1.25rem;z-index:2;"src="../../../assets/homepage/back.png" alt="" onclick="history.go(-1)"> 
        <el-steps align-center :active="active" finish-status="success">
                <el-step title="已接单"></el-step>
                <el-step title="接单方确认"></el-step>
                <el-step title="发布方确认"></el-step>
        </el-steps>
        <!--用户信息-->
        <div id="userInfo">
            <router-link to="/userCom" style="text-decoration:none;">
                <img style="width:2.75rem;height:2.75rem;border-radius:50%;margin-top:2.25rem;" :src="showData.taskModel.userModel.headPortrait" alt="">
            </router-link>
            <p style="font-size:0.8rem;">{{showData.taskModel.userModel.nickName}}<img v-if="showData.taskModel.userModel.sex==1" style="height:0.75rem;width:0.75rem;margin-left:0.25rem;" src="../../../assets/me/male.png" alt=""><img v-if="showData.taskModel.userModel.sex==2" style="height:0.75rem;width:0.75rem;margin-left:0.25rem;" src="../../../assets/me/women.png" alt=""></p>
            <img src="../../../assets/homepage/star.png" alt="">
            <img src="../../../assets/homepage/star.png" alt="">
            <img src="../../../assets/homepage/star.png" alt="">
            <img src="../../../assets/homepage/star.png" alt="">
            <img src="../../../assets/homepage/star.png" alt="">
            <p style="position:absolute;right:3.25rem;top:8.25rem;width:2rem;line-height:1rem;font-size:0.6rem;color:#888888;">
                <img style="width:0.9rem;height:1.25rem;"src="../../../assets/me/olget.png" alt=""><br>催单</p>
            <!--联系方式-->
            <div id="way">
                <div @click="callphone">
                    <img style="width:1.25rem;height:1.25rem;" src="../../../assets/homepage/call.png" alt="">
                    <p>电联</p>
                </div>
                <div @click="sendMsg">
                    <p style="border-left:1px solid #9d9d9d;border-right:1px solid #9d9d9d">
                    <img style="width:1.25rem;height:25px;" src="../../../assets/homepage/msg.png" alt=""></p>
                    <p>发短信</p>
                </div>
                <div @click="chargeback">
                    <img style="width:1.5rem;height:1.25rem;" src="../../../assets/me/olreturn.png" alt="">
                    <p>退单</p>
                </div>
            </div>
        </div>
        
        <!--用户详情-->
        <div id="userDe">
            <div class="commodity">
                <div class="comTit">
                    <p>{{showData.amount}}<span>￥</span></p> 
                    <p  style="font-size:0.6rem; color:#8e8e8e;">{{turnTime(showData.taskModel.initiatorTime)}} <span>发布</span></p>
                    <p style="font-size:0.6rem; color:#8e8e8e;">{{showData.taskName}}</p>
                </div>
                <div class="comCon">
                    {{showData.taskExplain}}
                </div>
                <div class="comImg" v-if="showData.common1||showData.common2">
                  <p><img :src="showData.common1" alt=""></p>
                  <p><img :src="showData.common2" alt=""></p>
                </div>
            </div>

            <div class="shops">
                <div class="card" v-for="item in showData.taskModel.dialogueModelList">
                    <div style="height:1.5rem;display:flex;">
                        <p style="height:1.75rem;width:3.25rem;border-radius:50%"><img style="height:2.5rem;width:2.5rem;" :src="item.userModel.headPortrait" alt=""></p>
                        <div style="width:8rem;">
                            <p style="font-size:0.6rem;">{{item.userModel.nickName}}</p>
                            <p >
                                 <img v-for="item in total" src="../../../assets/tabber/starHav.png" alt="">
                                 <img v-for="item in untotal" style="width:11px;height:11px;" src="../../../assets/tabber/unstarHav.png" alt="">
                            </p>
                        </div>
                        <p style="font-size:0.6rem;color:#8e8e8e;">{{turnTime(item.createTime)}} <span>发布</span></p>
                    </div>
                    <div style="margin:0.6rem 3rem;font-size:0.6rem;">
                        {{item.message}}
                    </div>
                </div>
            </div>
        </div>
        <!--发布-->
        <div id="usercomment" @click="confirmOrder">
            确认订单
        </div>
    </div>
</template>
<script>
import turnTime from '../../../server/dataTime.js'
export default {
  data () {
    return {
        total:undefined,
        untotal:undefined,
         turnTime:turnTime,
             showData:{
                 taskModel:{
                     userModel:{
                         nickName:undefined,
                     }
                 }
             },
      active:0,
    }
  },
   created(){
         this.getDetailData()
     },
      methods:{
           chargeback(){
            this.$api.chargeback(this.showData.id).then((res)=>{
                if(res.code=='000000'){
                   //
                }
            })
          },
        //  根据id获取详情
        getDetailData(){
            this.$api.getorderCommBI(this.$route.params.id).then((res)=>{
                if(res.code=='000000'){
                    this.showData = res.data
                    this.total = this.showData.taskModel.userModel.totalStar;
                    this.untotal = 5-Number(this.total)
                }
            })
        },
        // 确认订单
        confirmOrder(){
             this.$api.confirmOrder(this.$route.params.id).then((res)=>{
                if(res.code=='000000'){
                    this.$router.push({
                        path: '/Evaluation/'+this.showData.id,
                    })
                }
            })
        },
        callphone(){
            window.location.href = "tel:"+this.showData.taskModel.userModel.phoneNumber;
        },
        sendMsg(){
            window.location.href = "tel:"+this.showData.taskModel.userModel.phoneNumber;
        }
     }
}
</script>
<style>
#secondHandsellConfim{
    height:100%;
    width:100%;
    background-size:100% 100%;
    background-image:url(../../../assets/me/olBackground.png);
}
#secondHandsellConfim .el-steps{
    padding-top:0.8rem;
}
#secondHandsellConfim .el-step__icon.is-text {
    border-radius: 50%;
    border: 0px solid;
    border-color: inherit;
}
#secondHandsellConfim .el-step__icon {
    width: 0.9rem;
    height: 0.9rem;
    font-size: 0px;
}
#secondHandsellConfim .el-step.is-horizontal .el-step__line {
    top: 0.75rem;
}
#secondHandsellConfim .el-step__title.is-process {
    font-weight: 500;
    color: #303133;
}
#secondHandsellConfim .el-step__title {
    font-size: 0.6rem;
    line-height: 1.25rem;
}
#secondHandsellConfim #userInfo{
    margin:0.25rem 0.5rem 0px 0.5rem;
    text-align:center;
    height:11.5rem;
    background-size:100% 100%;
    background-image:url(../../../assets/me/olsecTAHe.png);
}
#secondHandsellConfim #userInfo img:nth-child(n+3){
    width:0.7rem;
    height:0.7rem
}
#secondHandsellConfim #way{
    margin:0.75rem;
    display:flex;
    font-size:0.6rem;
    color:#9d9d9d;
}
#secondHandsellConfim #way > div{
    width:33.33%;
    height:2.5rem;
    line-height:1.5rem;
    text-align:center;
}
#secondHandsellConfim #userDe{
    padding:0.75rem 0.6rem 0px 0.6rem;
    width:100%;
}
#secondHandsellConfim #userDe .commodity{
    background:#ffffff;
    width:100%;
    height:8.25rem;
    border:1px solid #c5aca0;
    border-radius:13px;
    padding:0.75rem 0.6rem;
}
#secondHandsellConfim #userDe .commodity .comTit{
    height:0.75rem;
    line-height:0.75rem;
    display:flex;
    justify-content:space-between;
}
#secondHandsellConfim #userDe .commodity .comTit p:nth-child(1){
    font-size:0.9rem;
    color:#2aa095;
}
#secondHandsellConfim #userDe .commodity .comCon{
    margin:0.5rem 1.25rem;
    font-size:0.6rem;
}
#secondHandsellConfim #userDe .commodity .comImg{
    display:flex;
    justify-content:space-around;
    margin:0px 0.75rem;
}
#secondHandsellConfim #userDe .commodity .comImg > p{
    height:4rem;
    width:4rem;
    background:#F8C3CD
}
#secondHandsellConfim #userDe .commodity .comImg img{
    width:100%;
    height:100%;
}
#secondHandsellConfim #userDe .shops{
    background:#ffffff;
    width:100%;
    height:10rem;
    overflow:scroll;
    border-radius:13px;
    border:1px solid #c5aca0;
}
#secondHandsellConfim #userDe .card{
    height:5rem;
    border-bottom:1px solid #9d9d9d;
    padding:0.6rem;
    
}

#secondHandsellConfim #usercomment{
    width:50%;
    text-align:center;
    color:#fff;
    height:2.5rem;
    line-height:2.5rem;
    margin:0.75rem auto;
    background:#29a193;
    border-radius:13px;

}
</style>
